<!--
 * @Author: jqm123 2289662078@qq.com
 * @Date: 2025-04-02 16:23:42
 * @LastEditors: jqm123 2289662078@qq.com
 * @LastEditTime: 2025-09-02 10:56:05
 * @FilePath: store.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--  -->
<template>
  <div class="home">
    <div class="top" :style="{ background: isTop ? 'transparent' : '#82b4ef' }">
      <div class="address">
        <van-icon name="location-o" />{{ locationInfo.district || "长兴县" }}
      </div>
      <div class="search flex_b_c" @click="goSearch">
        <div style="display: flex; align-items: center">
          <van-icon name="search" color="#bfbfbf" class="search-icon" />
          <span class="placeholder">汽车保养</span>
        </div>
        <div class="search_btn">搜索</div>
      </div>
    </div>
    <!-- <div class="select_options">
      <van-dropdown-menu :overlay="false">
        <van-dropdown-item v-model="store" :options="option1" />
        <van-dropdown-item v-model="sort" :options="option2" />
      </van-dropdown-menu>
    </div> -->
    <div class="banner">
      <van-swipe :autoplay="3000" :show-indicators="false">
        <van-swipe-item
          v-for="(v, i) in bannerList"
          :key="JSON.stringify(v) + i"
          @click="link(v)"
        >
          <van-image width="100%" :src="v.picUrl" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="list">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <storeListItem
            v-for="(v, i) in list"
            :key="i"
            :item="v"
            @click.native="goDetail(v)"
          >
          </storeListItem>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import api from "@/api/api";
import storeListItem from "@/components/store/storeListItem.vue";
import { mapGetters } from "vuex";
export default {
  //import引入的组件需要注入到对象中才能使用
  name: "store",
  components: { storeListItem },
  data() {
    //这里存放数据
    return {
      store: 0,
      sort: "",
      option1: [
        { text: "智能排序", value: 0 },
        { text: "评分最高", value: 1 },
        { text: "距离最近", value: 2 },
      ],
      option2: [
        { text: "服务项目", value: "" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" },
      ],
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      isTop: true,
      pageInfo: {
        pageNum: 1,
        pageSize: 100,
      },
      bannerList: [],
    };
  },
  //监听属性 类似于data概念
  computed: {
    ...mapGetters(["locationInfo"]),
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    onLoad() {
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }
      this.getStoreList();
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      this.refreshing = true;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.pageInfo.pageNum = 1;
      this.loading = true;
      this.onLoad();
    },
    handleScroll() {
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop < 50) {
        this.isTop = true;
      } else {
        this.isTop = false;
      }
    },
    goDetail(item) {
      this.$router.push({
        path: "/storeDetail",
        query: {
          id: item.id,
          // location: JSON.stringify({
          //   lat: item.lat,
          //   lng: item.lng,
          // }),
        },
      });
    },
    async getStoreList() {
      api
        .getStoreList({ ...this.pageInfo })
        .then((res) => {
          if (res.length == 0) this.finished = true;
          this.list = [...this.list, ...res].filter(
            (v) => v.id != "1950105163568574466"
          );
          this.finished = true;
          // if (res.length < this.pageInfo.pageSize) {
          //   this.finished = true;
          // } else {
          //   this.pageInfo.pageNum++;
          // }
        })
        .finally(() => (this.loading = false));
    },
    goSearch() {
      this.$router.push({
        path: "/search",
      });
    },
    async getBannerList() {
      this.bannerList = await api.getHomeBannerList({
        positionType: 3,
      });
    },
    link(v) {
      switch (v.type) {
        case 0:
          //无事件
          return;
        case 1:
          //商品详情
          this.$router.push({
            path: "/serveDetail",
            query: {
              goodsId: v.keyId,
            },
          });
          break;
        case 2:
          //外链
          window.location.href = `${v.url}`;
          break;

        case 3:
          //商品种类
          break;

        case 4:
          //爆品活动
          break;

        case 5:
          //直播
          break;

        case 6:
          //新闻
          break;

        case 7:
          //帖子
          break;
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
    this.getBannerList();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  }, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.home {
  min-height: 100vh;
  background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/44dea588672142d48f873df92c7b625e.jpg")
    no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: top center;
  box-sizing: border-box;
  padding: 150px 50px 150px 50px;
  position: relative;

  .top {
    position: fixed;
    padding: 30px 50px;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 999;

    .address {
      font-size: 44px;
    }

    .search {
      width: 960px;
      height: 0.75rem;
      background: #fff;
      border-radius: 999px;
      padding: 20px 20px 20px 40px;
      display: flex;
      align-items: center;

      .search-icon {
        font-size: 44px;
      }

      .placeholder {
        color: #bfbfbf;
        font-size: 44px;
        margin-left: 10px;
      }

      &_btn {
        width: 160px;
        height: 80px;
        border-radius: 40px;
        background: linear-gradient(to right, #015eea, #00bffa);
        font-size: 44px;
        color: #fff;
        text-align: center;
        line-height: 80px;
      }
    }
  }

  .select_options {
    margin-top: 30px;

    /deep/ .van-dropdown-menu__bar {
      background: rgba(255, 255, 255, 0.1);
      height: 110px;

      .van-dropdown-menu__title {
        font-size: 36px;
        color: #fff;
      }
    }

    /deep/.van-popup--top {
      left: 4%;
      width: 92%;

      .van-cell {
        font-size: 35px;
      }
    }
  }

  .banner {
    margin-top: 20px;
  }

  .list {
    margin-top: 35px;
  }

  .flex_b_c {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
